<template>
  <div class="bread">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        v-for="(item, index) in breadList"
        :key="index"
        :to="{ path: item.path }"
        >{{ item.title }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
import { ifTitle } from "@/assets/js/arrFn.js";

export default {
  data() {
    return { breadList: [] };
  },
  watch: {
    $route: {
      deep: true,
      immediate:true,
      handler(val) {
        let arr = [{ path: "/home", title: "首页" }];
        val.matched.forEach((item) => {
          let { path, title } = item.meta;
          if (ifTitle(arr, title)) {
            arr.push({arr, title});
          }
        });
        this.breadList = arr;
        console.log(this.breadList);
      },
    },
  },
};
</script>

<style lang="less" scoped>
.bread {
  margin-bottom: 20px;
}
</style>